<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>列表过滤</title>
</head>
<body>
    <div id="root">
        <!-- 
            
        -->
        <h2>列表过滤</h2>
        <!-- 遍历数组 -->
        <input type="text" v-model="keyWord">
        <ul>
            <li v-for="(person,index) in filterPersons" :key="person.id">
                {{person.name}}-{{person.age}}-{{person.sex}}
            </li>
        </ul>
    </div>
</body>
<script>
    // watch实现
    //#region
    /* var vm = new Vue({
        el: '#root',
        data: {
            keyWord:'',
            persons:[
                {
                    id:'001',
                    name: '马冬梅',
                    age: 20,
                    sex:"女"
                },
                { 
                    id:'002',
                    name:'周冬雨',
                    age:18,
                    sex:"女"
                },
                {
                     id:'003',
                    name:"周杰伦",
                    age:25,
                    sex:"男"
                },
                {
                     id:'004',
                    name:"温兆伦",
                    age:25,
                    sex:"男"
                }
            ],
            filterPersons:[]
        },
        watch: {
            keyWord: {
                immediate: true,
                handler: function(newVal,oldVal){
                    this.filterPersons = this.persons.filter(
                        (person) => {
                            return person.name.indexOf(newVal)!== -1
                        }
                    )
                }
            }
        }
    })   */ 
    //#endregion   
    //计算属性实现
    var vm = new Vue({
        el: '#root',
        data: {
            keyWord:'',
            persons:[
                {
                    id:'001',
                    name: '马冬梅',
                    age: 20,
                    sex:"女"
                },
                { 
                    id:'002',
                    name:'周冬雨',
                    age:18,
                    sex:"女"
                },
                {
                     id:'003',
                    name:"周杰伦",
                    age:25,
                    sex:"男"
                },
                {
                     id:'004',
                    name:"温兆伦",
                    age:25,
                    sex:"男"
                }
            ],
        },
        computed:{
            filterPersons: function(){
                return this.persons.filter(
                    (person) => {
                        return person.name.indexOf(this.keyWord)!== -1
                    }
                )
            }
        }
    })      
</script>
</html>